<template>
	<view class="hoteldetail">
		<!-- <Header @back="back" left-icon="back" left-text="" right-text="" title="住宿详情"></Header> -->
		<view class="content">
			<!-- 轮播图 -->
			<view class="swiper-contain">
				<view @click="back()" style="position:absolute;top:60upx;left:25upx;z-index: 9999; border-radius: 50%;width: 50upx;height: 50upx; display: flex;justify-content: center;align-items: center;">
					<text  style="font-size: 36upx;" class="back iconfont icon-left"></text>
				</view>
				
				<swiper @change="onSwiperChange" class="swiper" :autoplay="autoplay" :interval="interval"
				 :duration="duration" :indicator-dots='false'>
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.url" mode="aspectFill" v-if="item.type=='image'" class="swiper-img"></image>
					</swiper-item>
				</swiper>
				<!-- <view class="dots">
					<block v-for="(item_1, index1) in swiperList" :key="index1">
						<view class="dot" :class="index1 == currentSwiper ? ' active' : ''"></view>
					</block>
				</view> -->
				<view class="pic-tip">
					<view class="pic">
						<view>
							<text  @click="goPhotoList(0)" style="font-size: 30upx;" class="iconfont icon-xiangji image"></text>
						</view>
						<view  @click="goPhotoList(0)">
							<text>相册 |</text>
						</view>
						<view @click="goPhotoList(1)">
							<text style="margin-left: 6upx;">视频</text>
						</view>	
					</view>
				</view>
			</view>
			<!-- 轮播图 end -->
			<!-- 标题-->
			<view class="introduce">
				<view class="intro-name">
					<view>
						<text>{{searchHotel.title}}</text>
					</view>
					<view>
						<block v-for="(item,index) in stars" :key="index">
						<text style="font-size: 32upx; color:#e2a26d" class="iconfont icon-star-fill"></text>
					</block>
					</view>
					
					<!-- <Star :starSize="'0.6rem'" :disabledStar="true" :defaultStar="searchHotel.star" :maxStar="5" class='sunui-star star'>
					</Star> -->

				</view>
				<view class="intro-tips">
					<view class="tip" v-for="(item,index) in LabelHotel" :key="index">
						<text>{{item}}</text>
					</view>
				</view>
				<view class="intro-address">
					<text>{{searchHotel.address}}</text>
				</view>
			</view>
			<view style="padding: 0 24upx;">
				<view style="width: 100%;height: 1upx;background: #eee;"></view>
			</view>
			<!--end标题-->
			<!-- <view class="line8"></view> -->
			<!--详情-->
			<!-- <view class='hotel-detail'>
				<view>
					<text v-if="openingDate">{{openingDate}}年开业</text>
				</view>
				<view class="room-facility">
					<block v-if="index < 2" v-for="(item,index) in hotel_facility" :key="index">
						<text v-html="item.replace(/免费/g,'<text style=color:#0092ff>免费</text>')"></text>
						<text v-if="index < hotel_facility.length-1">丨</text>
					</block>
				</view>
				<view class="hotel-facility">
					<block v-if="index < 4" v-for="(item,index) in room_facility" :key="index">
						<text v-html="item.replace(/免费/g,'<text style=color:#0092ff>免费</text>')"></text>
						<text v-if="index < room_facility.length-1">丨</text>
					</block>
				</view>
				<view class="more" @click="goHotelGuide()">
					<text>详情/设施</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view> -->
			<!-- 详细地址 -->
			<!-- <view class="fz15 h-c address">
				<view class="font-weight">地址</view>
				<view class="address-del over1">{{searchHotel.contactAddress}}</view>
				<view class="tip" @click="goWay()">
					<text class="fz12">去这里</text>
					<image class="a-jt" src="../../static/img/a-jt.png" mode=""></image>
				</view>
			</view> -->
			<!-- 详细地址 end-->
			<!-- <view class="line20"></view> -->
			<!-- 入住-离店 -->
			<view class="checkin">
				<view class="checkin-date-picker">
					<view class="fz13 h-c checkin-date-left" @click="onShowDatePicker(0)">
						<view class="h-c7 check-txt">
							<text>入住</text>
						</view>
						<view class="fz18 font-weight date">
							<text>{{checkInTime}}</text>
						</view>
					</view>
					<view class="h-c7 fz13 ">
						{{days}}晚
					</view>
					<view class="fz13 h-c checkin-date-left" @click="onShowDatePicker(1)">
						<view class="h-c7 check-txt">
							<text>离店</text>
						</view>
						<view class="fz18 font-weight date">
							<text>{{checkOutTime}}</text>
						</view>
					</view>
				</view>
				<mx-date-picker :show="showPicker" type="date" :value="pickerValue" :showHoliday="false" @confirm="onSelected"
				 @cancel="oncancel" />
				 
				 <block v-for="(hotel,index) in reListData" :key="index">
					<view class="hotel-list" @click="touchFlag(hotel)">
						<view class="hotel-left">
						<image :src="hotel.imageUrl"></image>
						</view>
						<view class="hotel-right">
							<view class="name">
								<text>{{hotel.name}}</text>
							</view>
							<view class="tips">
								<text>{{hotel.description}}</text>
							</view>
							<!-- <view class="hotel_type">
								<text class="cancel">不可取消</text>
								<text class="confirm">立即确认</text>
							</view> -->
						</view>
						<view class="re-order">
							<view v-if="!hotel.flag">
								<text style="font-size: 30upx;color: #888;" class="iconfont icon-down"></text>
							</view>
							<view v-if="hotel.flag">
								<text style="font-size: 30upx;color: #888;" class="iconfont icon-up"></text>
							</view>
							<!-- <view class="price">
								<text style="color: #FE5A34;" class="fz16">¥{{hotel.price}}</text>
							</view> -->
							<!-- <view class="reverse-btn" @click="reserve(hotel)">
								<text>预订</text>
							</view>
							<view class="reverse-tips">
								<text>在线付</text>
							</view> -->
						</view>
					</view>
					<view class="br"></view>
					<block  v-if="hotel.flag" v-for="(room,index) in hotel.elongRatePlanList" :key="index">
						<view class="room-list">
							<view class="room-price">
								{{room.ratePlanName}}
							</view>
							<view class="hotel_type">
								<text class="cancel">不可取消</text>
								<text class="confirm">立即确认</text>
							</view>
							<view class="price">
								<text style="color: #FE5A34;" class="fz16">¥{{room.totalRate}}</text>
							</view>
							<view class="re-order">
								<!-- <view class="price">
									<text style="color: #FE5A34;" class="fz16">¥{{hotel.price}}</text>
								</view> -->
								<view class="reverse-btn" @click="reserve(room)">
									<text>预订</text>
								</view>
								<view class="reverse-tips">
									<text>在线付</text>
								</view>
							</view>
						</view>
					</block>
				</block>
					
					<!-- <view class="hotel-li" v-for="(hotel, index1) in reListData" :key="index1">
						<image class="li-img" :src="hotel.img" mode=""></image>
						<view class="li-right">
							<view class="fz18 hotel-name">{{hotel.name}}</view>
							<view class="li-right-bottom">
								<view class="over1 fz14 fenlei">
									<view class="over1" v-for="(info, index2) in hotel.info" :key="index2">
										{{info}}
									</view>
								</view>
								<view class="reserve-box">
									<view class="fz10 tc money">
										￥
										<text class="fz15">{{hotel.price}}</text>
									</view>
									<view class="fz14 w-c reserve-btn" @click="reserve(hotel)">
										预订
									</view>
								</view>
							</view>
						</view>
					</view> -->
					<view class="fz18 all-btn" v-if="reListData_all.length > 3" @click="checkall">
						<text class="iconfont icon-down" v-if="check_all"></text>
						<text class="iconfont icon-up" v-if="!check_all"></text>
						<!-- <image class="xl" v-if="check_all" src="../../static/img/xl.png" mode=""></image>
						<image class="xl" v-else src="../../static/img/xx.png" mode=""></image> -->
					</view>
				
			</view>
			<!-- 入住-离店 end -->
			<!-- 住客评论 -->
			<!-- 住客点评 begin -->
			<view style='width:100%;height:24upx;background:#F7F7F7'></view>
			<view class='flex-row flex-space'  style='margin-top:42upx;padding-left:24upx;box-sizing: border-box;padding-right:24upx;align-items: baseline;overflow: hidden;'>
			  <view>
			    <text style="color:#333333;font-size:40upx;font-weight:bold;line-height: 1.2;">住客点评</text>
			    <text style="color:#808080;font-size:28upx;line-height:30upx;margin-left:12upx;">(共{{total}}条)</text>
			  </view>
			  <view v-if="comments.length <= 3" v-hidden="comments.length >= 1" class="flex-row" style='margin-top: 40upx;margin-bottom: 40upx;display: flex;justify-content: center;align-items: center;overflow: hidden;'>
			    <view class='lookMoreCommentKey' @click='lookMoreComment()'>添加评论</view>
			    <!-- <image class='lookMoreCommentIco' @click='lookMoreComment()' src='../../static/img/rightArrow.png'></image> -->
				<view class="lookMoreCommentIco">
					<text class='iconfont icon-right' @click='lookMoreComment()'></text>
				</view>
			  </view>
			</view>
			<block  v-for="(item,index) in comments" v-if="index < 3" :key="index" v-hidden="comments.length == 0">
			  <view class="flex-col" style='widht:100%;margin-top:33upx;box-sizing: border-box;padding-left:24upx;padding-right:24upx;'>
			    <view class='flex-row' style='align-items: center;'>
			      <image class="headPortrait" :src='item.headPortrait'> </image>
			      <text style='margin-left:18upx;color:#333333;font-size:34upx;line-height:34upx;font-weight:bold;'>{{item.nickname}}</text>
			    </view>
			    <text style='color:#808080;font-size:26upx;margin-top:5upx;margin-left:70upx;'>点评时间:{{item.createTimeStr}}</text>
			    <text style='color:#1A1A1A;font-size:30upx;margin-top:25upx;margin-left:70upx;'>{{item.content}}</text>
			    <view v-if="index < 3" style='margin-top:43upx; width:100%;height:1px;background:#F7F7F7'></view>
			  </view>
			</block>
			<view class="noComment" v-if="comments.length < 1">
			  <image class='noCommentImg' src='../../static/img/pinglun.png'></image>
			  <!-- <text class='noCommentKey'>暂无点评</text> -->
			</view>
			<view v-if="comments.length > 3" :hidden="comments.length == 0" class="flex-row" style='width: 100%;margin-right: 30upx;margin-top: 40upx;margin-bottom: 40upx;display: flex;justify-content: center;align-items: center;overflow: hidden;'>
			  <view class='lookMoreCommentKey' @click='lookMoreComment()'>查看全部评论</view>
			  <image class='lookMoreCommentIco' @click='lookMoreComment()' src='../../static/img/rightArrow.png'></image>
			</view>
			<view style='width:100%;height:24upx;background:#F7F7F7'></view>
			<view class="popular-travels">
				<view class="popular-travels-title">
					<text>热门推荐</text>
				</view>
				 <view class="popular-travels-list-boxs">
					 <block v-for="(item,index) in recommendTravels" :key="index">
						 <view class="popular-travels-list" @click="goToTravel(item.id,item.type)">
							 <view class="popular-travels-list-img">
								 <image :src="item.otherImage" style="width: 100%;height: 100%;border-radius: 6px 6px 0px 0px;"></image>
								 <view class="discover-travelist-aers">
								 	<!-- <text class="iconfont icon-location-fill" style="margin-right: 5upx;"></text> -->
								 	<text>{{item.type}}</text>
								 </view>
							 </view>
							
							 <view class="popular-travels-list-info">
								 <view class="popular-travels-list-text">
									 <text>{{item.title}}</text>
								 </view>
								 <view class="popular-travels-role">
									 <!-- <view class="popular-travels-list-headPortrait">
										<image style="width: 100%;height: 100%;border-radius: 50%;" :src="item.headPortrait"></image>
									 </view> -->
									 <view>
										<view class="popular-travels-list-author">
											<text>{{item.readCount || '0'}}人浏览</text>
										</view>
										 <!-- <view class="popular-travels-list-time">
											 <text>{{item.sendTime}}</text>
										 </view> -->
									 </view>
								 </view>
								 
							 </view>
						 </view>
					 </block>
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
	import xyDialog from '@/components/xy-dialog.vue';
	import Star from '@/components/sunui-star/sunui-star.vue';
	
	export default {
		data() {
			return {
				recommendTravels:[],
				comments:[],
				total:0,
				indicatorColor: '#000',
				indicatorActiveColor: "#fff",
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				currentSwiper: 0,
				swiperList: [],
				showPicker: false,
				date: '2019/01/01',
				pickerValue: '',
				dateType: 0, // 0 表示入住时间 1表示离店日期
				days: 1,
				searchHotel: {},
				reListData_all: [],
				reListData: [],
				nearHotelList: [],
				check_text: '点击显示全部',
				check_all: true,
				hotelId: '',
				items: {},
				checkInTime: '',
				checkOutTime: '',
				inFullDate: "",
				outFullDate: "",
				room_facility: [],
				stars:[],
				openingDate:'',
				//[
					// "防过敏床品",
					// "接送服务",
					// "行李寄存"
				//],//房间设施
				hotel_facility:[
					// "免费停车场",
					// "24小时前台",
					// "旅游咨询服务",
					// "免费有线上网"
				],//酒店设施
				LabelHotel:[],
				comment_list:[],
			}
		},
		components: {
			Header,
			MxDatePicker,
			xyDialog,
			Star
		},
		mounted() {

		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// if (option.userinfo) {
			// 	let userinfo = JSON.parse(decodeURIComponent(option.userinfo));
			// 	if (userinfo.appid) {
			// 		this.pub.setAppid(userinfo.appid)
			// 	}
			// 	if (userinfo.secret) {
			// 		this.pub.setSecret(userinfo.secret)
			// 	}
			// 	this.pub.getEncryptionOid(userinfo, function(res) {})
			// }
			console.log("传过来的参数-------->",option);
			this.hotelId = option.hotelid;
			if(!option.inDate||option.inDate==""||!option.outDate||option.outDate==""){
				//初始化日期
				this.initDate();
			} else {
				// this.inFullDate = option.inDate;
				// this.outFullDate = option.outDate;
				this.inFullDate = option.trueInDate;
				this.outFullDate = option.trueOutDate;
				this.trueInDate = option.trueInDate;
				this.trueOutDate = option.trueOutDate;
				let date = new Date(this.inFullDate)
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				let d = date.getDate()
				
				let date2 = new Date(this.outFullDate)
				let y2 = date2.getFullYear()
				let m2 = date2.getMonth() + 1
				let d2 = date2.getDate()
				
				// this.checkInTime = (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日'
				// this.checkOutTime = (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'
				this.checkInTime = option.trueInDate
				this.checkOutTime = option.trueOutDate
				
				let days = date2.getTime() - date.getTime();
				this.days = parseInt(days / (1000 * 60 * 60 * 24))
			}

			// this.searchHotelInfoById()
			// this.getRoomInfo()
			// this.searchHotelByC()
			this.getHotelDetails()
			this.getCommentList()
			this.getNewTravels_discover()
		},
		onShow:function(){
			//#ifdef H5
			document.title = '酒店详情'
			//#endif
		},
		methods: {
			getNewTravels_discover(attribute){
				var that = this
				// this.recommendTravels = []
				var param = {
					channelType: '1',
					city:this.citys
				}
				this.$postApi(this.$path.GET_RECOMMEND_LIST,param).then(res=>{
					// this.recommendTravels = []
			
					// this.recommendTravels = res.data.data.list
					let list = res.data.data
					console.log("返回热门推荐列表目的地",res)
					if (res.data.success) {
						list.forEach(item => {
							item.otherImage = this.pub.delLastf(item.otherImage)
							if(item.readCount == null || item.readCount == "null"){
								item.readCount = 0
							}
							switch(item.type){
								case "1":
									item.type = "景区"
								break;
								case "2":
									item.type = "酒店"
								break;
								case "3":
									item.type = "游记"
								break;
								case "4":
									item.type = "餐厅"
								break;
								case "5":
									item.type = "美食"
								break;
								case "6":
									item.type = "农家乐"
								break;
							}
						})
					this.recommendTravels = list
					}	
				})
				
			},
			goToTravel:function(id,type){
				console.log(type)
				var url = ''
				switch(type){
					case "景区":
						url = '/pages/scence/scencedetail?id=' + id
					break;
					case "酒店":
						url = '/pages/hotel/hoteldetail?hotelid=' + id
					break;
					case "游记":
						url = '/pages/travelDetail/travelDetail?id=' + id
					break;
					case "餐厅":
						url = '/pages/restaurant/restaurant_detail?id=' + id
					break;
					case "美食":
						url = '/pages/food/foodlist_new?id=' + id
					break;
					case "农家乐":
						url = '/pages/agritainment/agritainmentdateil?id=' + id + '&title='+ '菜品介绍'
					break;
				}
				uni.navigateTo({
					url:url,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			touchFlag(hotel){
				console.log("hotel------------>",hotel)
				if(this.reListData[hotel.index].flag) {
					this.reListData[hotel.index].flag = false
					return
				}
				if(hotel.elongRatePlanList.length == 0){
					this.pub.showError('暂无可售房型')
					return
				}
				let temp = this.reListData;
				
				temp.forEach(item => {
					item.flag = false
					if(hotel.index == item.index){
						item.flag = !item.flag
					}
				})
				this.reListData = temp;
				
				// this.reListData[hotel.index].flag = !this.reListData[hotel.index].flag;
				console.log("flag--------->",this.reListData[hotel.index].flag)
				console.log("this.reListData------------>",this.reListData)
			},
			lookMoreComment(){
				uni.navigateTo({
					url: "/pages/comment/comment?title=" + this.searchHotel.name + "&id=" + this.searchHotel.id + "&falg=2",
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			goHotelGuide(){
				uni.setStorage({
					key: 'datas',
					data: this.searchHotel,
					success: function () {
						
					}
				});
				uni.navigateTo({
					url:'/pages/hotel/hotelGuide/hotelGuide',
					animationType:"pop-in",
					animationDuration:"200"
				})
			},
			goPhotoList(active){
				let list = this.searchHotel.carouselImg.toString().split("|");
				// list.forEach(i => {
				// 	i = this.pub.fmtImgUrl(i);
				// });
				console.log("图片列表list---------->",list);
				uni.setStorage({
					key:'photo_list',
					data:list
				});
				
				uni.navigateTo({
					url:'/pages/photolist/photolist?active=' + active + '&isVideo=1',
					animationType: 'pop-in',
					animationDuration:'200'
				})
			},
			initDate() {
				let date = new Date()
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				let d = date.getDate()

				let date2 = new Date()
				date2.setDate(date2.getDate() + 1)
				let y2 = date2.getFullYear()
				let m2 = date2.getMonth() + 1
				let d2 = date2.getDate()

				this.inFullDate = y + '/' + (m < 10 ? ('0' + m) : m) + '/' + (d < 10 ? ('0' + d) : d)
				this.outFullDate = y2 + '/' + (m2 < 10 ? ('0' + m2) : m2) + '/' + (d2 < 10 ? ('0' + d2) : d2)
				this.checkInTime = (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日'
				this.checkOutTime = (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			goWay() {
				uni.showToast({
					title: '此功能暂未开通！',
					icon: 'none',
					duration: 2000
				});
			},
			timelimit(val) {
				uni.showToast({
					title: val,
					icon: 'none',
					duration: 2000
				});
			},
			onSwiperChange(e) {
				this.currentSwiper = e.detail.current
			},
			onShowDatePicker(i) { //显示
				this.showPicker = true;
				if (i == 0) {
					this.pickerValue = this.trueInDate 
				} else {
					this.pickerValue = this.trueOutDate
				}
				this.dateType = i
			},
			onSelected(e) { //选择
			console.log("选中的数据------------------>",e);
				if (e) {
					let result = e.value
					if (this.dateType == 0) {
						let inDate = new Date(result)
						let outDate = new Date(this.outFullDate)
						let nowDate = new Date();
						let y0 = inDate.getFullYear()
						let m0 = inDate.getMonth() + 1
						let d0 = inDate.getDate()
						let nowFullDate = y0 + '/' + (m0 < 10 ? ('0' + m0) : m0) + '/' + (d0 < 10 ? ('0' + d0) : d0);

						if (result < nowFullDate) {
							uni.showToast({
								title: '入时间不能小于今天！',
								icon: "none",
								duration: 3000
							})
							return false
						}

						let y = inDate.getFullYear()
						let m = inDate.getMonth() + 1
						let d = inDate.getDate()
						this.inFullDate = result;
						this.checkInTime = (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日'

						if (this.outFullDate <= result) {
							outDate = inDate;
							outDate.setDate(outDate.getDate() + 1);
						}
						let y2 = outDate.getFullYear()
						let m2 = outDate.getMonth() + 1
						let d2 = outDate.getDate()
						this.outFullDate = y2 + '/' + (m2 < 10 ? ('0' + m2) : m2) + '/' + (d2 < 10 ? ('0' + d2) : d2)
						this.checkOutTime = (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'
					} else if (this.dateType == 1) {
						if (result <= this.inFullDate) {
							uni.showToast({
								title: '离店时间必须大于当天时间！',
								icon: "none",
								duration: 3000
							})
							return
						}
						let outDate = new Date(result);
						let y2 = outDate.getFullYear()
						let m2 = outDate.getMonth() + 1
						let d2 = outDate.getDate()
						this.outFullDate = y2 + '/' + (m2 < 10 ? ('0' + m2) : m2) + '/' + (d2 < 10 ? ('0' + d2) : d2)
						this.checkOutTime = (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'
					}

					let days = new Date(this.outFullDate).getTime() - new Date(this.inFullDate).getTime()
					this.days = parseInt(days / (1000 * 60 * 60 * 24))
					this.showPicker = false
				}
				this.getRoomInfo();
			},
			oncancel() {
				this.showPicker = false;
			},
			
			getHotelDetails() { //酒店详情
				this.$postApi(this.$path.GET_HOTEL_BYID, {
					id: this.hotelId
					// id:"elong_00101665"
				}).then(res => {
					let data = res.data;
					console.log("返回的酒店详情",data);
					let hotel = data.data;
					let tmp = [];
					if(hotel.label){
						hotel.label.toString().split(";").forEach(item => {
							if(item){
								tmp.push(item)
							}
						})
						this.LabelHotel = tmp;
						tmp = []
					}
					this.openingDate = hotel.openingDate
					// if(hotel.publicService){
					// 	this.hotel_facility = data.data.publicService.split(",");
					// }else{
					// 	this.hotel_facility = ['24小时前台','电梯']
					// }
					// if(data.data.hotelService){
					// 	this.room_facility = data.data.hotelService.split(",");
					// }else{
					// 	this.room_facility = ['免费wifi','行李寄存','旅游咨询服务']
					// }
					
					
					this.searchHotel = hotel;
					console.log("this.Hotel---------->",this.searchHotel);
					switch(this.searchHotel.star){
						case '一星':
						 this.searchHotel.star = 1;
						 this.stars.push('1');
						break;
						case '二星':
						 this.searchHotel.star = 2;
						 this.stars.push('1');
						 this.stars.push('2');
						break;
						case '三星':
						 this.searchHotel.star = 3;
						 this.stars.push('1');
						 this.stars.push('2');
						 this.stars.push('3');
						break;
						case '四星':
						 this.searchHotel.star = 4;
						 this.stars.push('1');
						 this.stars.push('2');
						 this.stars.push('3');
						 this.stars.push('4');
						break;
						case '五星':
						 this.searchHotel.star = 5;
						 this.stars.push('1');
						 this.stars.push('2');
						 this.stars.push('3');
						 this.stars.push('4');
						 this.stars.push('5');
						break;
						default:
						 this.searchHotel.star = 0;
						break;
					}
					
					this.searchHotel.mainImage = this.pub.delLastf(this.searchHotel.mainImage); 
					this.$set(this.swiperList, 0, {
						id: 0,
						type: 'image',
						url: this.searchHotel.mainImage 
					})
					
					this.getRoomInfo()
					// this.searchHotel.hostImg.forEach((el, index) => {
					// 		el = this.pub.fmtImgUrl(el);
					// 		this.$set(this.swiperList, index, {
					// 			id: index,
					// 			type: 'image',
					// 			url: el
					// 		})
					// 	})
					// this.hotel_facility =
					// uni.setStorage({
					// 	key: 'datas',
					// 	data: data.data.data,
					// 	success: function () {
					// 		console.log('success',111111);
					// 	}
					// });
					// uni.setStorage({
					// 	key: 'hotelService',
					// 	data: this.room_facility,
					// 	success: function () {
					// 		console.log('success');
					// 	}
					// });
					// uni.setStorage({
					// 	key: 'publicService',
					// 	data: this.hotel_facility,
					// 	success: function () {
					// 		console.log('success');
					// 	}
					// });
					// uni.setStorage({
					// 	key: 'roomService',
					// 	data: data.data.data.roomService.split(","),
					// 	success: function () {
					// 		console.log('success');
					// 	}
					// });
				})
			},
			getRoomInfo() { // 列表
			  var params = {
				  hotelId:this.searchHotel.code,
				  indate :this.inFullDate.replace(new RegExp("/", "gm"), "-"),
				  outdate:this.outFullDate.replace(new RegExp("/", "gm"), "-")
			  }
				this.$postApi(this.$path.GET_ROOMS_LIST_SYNC, params).then(res => {
					console.log("房间列表返回数据--------->",res.data);
					if (res.data.success){
						let list = res.data.data;
						//房型可售筛选
						let index = 0;
						list.forEach(item => {
							item.flag = false;
							item.index = index;
							// item.description = item.description.split('、')
							let roomtmp = [];
							item.elongRatePlanList.forEach(room => {
								//这两个状态都为true,且销售类型为预售才说明返回的房型是可售的
								if(room.status && room.nightlyRateStatus && room.paymentType != 'SelfPay'){
									roomtmp.push(room)
								}
								room.hotelId = this.searchHotel.id
								room.roomName = item.name
							})
							item.elongRatePlanList = roomtmp
							index ++ ;
						});
						this.reListData = list;
						console.log("房型数据-------------->",this.reListData)
					}
				})
			},
			checkall() {
				if (this.check_all) {
					this.reListData = this.reListData_all
					this.check_text = '点击收起'
					this.check_all = false
				} else {
					this.reListData = this.reListData_all.slice(0, 3)
					this.check_text = '点击显示全部'
					this.check_all = true
				}
			},
			reserve(item) {
				if(!this.pub.checkUserInfo()) {
					return
				}
				
				item.indate = this.inFullDate.replace(new RegExp("/", "gm"), "-")
				item.outdate = this.outFullDate.replace(new RegExp("/", "gm"), "-")
				uni.navigateTo({
					url: "/pages/hotel/bookhotel?item=" + encodeURIComponent(JSON.stringify(item)),
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			//获取评论数据
			getCommentList(){
				var that = this;
				var params = {
					pageNo:'1',
					pageSize:'10',
					busid: this.hotelId
				}
				this.$postApi(this.$path.GET_NEW_COMMENT_LIST,params).then(res => {
						console.log("评论列表返回数据------------->",res.data);
					var data = res.data
					this.comments = data.list
					this.total = data.total
					
				
				})
			}
		}
	}
</script>

<style lang="scss" scope>
	.popular-travels-role{
		display: flex;
		padding-bottom: 30upx;
	}
	.popular-travels-list-headPortrait{
		width: 36upx;
		height: 36upx;
		margin-right: 8upx;
		// border-radius: 50%;
	}
	.popular-travels-list-author{
		margin-bottom: 10upx;
		font-family: PingFang-SC-Medium;
		font-size: 26upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #333333;
		opacity: 0.9;
	}
	.popular-travels-list-time{
		font-family: PingFang-SC-Medium;
		font-size: 20upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #999999;
		opacity: 0.9;
	}
	.popular-travels-title{
		padding: 57upx 0 17upx 24upx;
		font-family: PingFang-SC-Bold;
		font-size: 44upx;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #000000;
	}
	.popular-travels-list{
		width: 48.5%;
		margin-bottom: 24upx;
		background-color: #f3f4f8;
		border-radius: 0px 0px 6px 6px;
		
	}
	.discover-travelist-aers{
		padding: 5upx 12upx;
		background-color: #353638;
		border-radius: 20upx;
		opacity: 0.8;
		position: absolute;
		bottom:15upx;
		right: 15upx;
		font-family: PingFang-SC-Bold;
		font-size: 24upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #ffffff;
	}
	.popular-travels-list-info{
		padding: 20upx 13upx 0 13upx;
	}
	.popular-travels-list-boxs{
		background: #fff;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 18upx 24upx 24upx 24upx;
		
		
	}
	.popular-travels-list-img{
		position: relative;
		width: 100%;
		height: 267upx;
	}
	.popular-travels-list-text{
		width: 100%;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		line-height: 40upx;
		margin-bottom: 20upx;
		font-family: PingFang-SC-Bold;
		font-size: 32upx;
		font-weight: 600;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #1a1a1a;
	}
	.headPortrait{
	  width:54upx;
	  height:54upx;
	  border-radius:50%;
	}
	.flex-space{
	  display: flex;
	  justify-content: space-between;
	}
	.lookMoreCommentKey{
	  color:#139aff;
	  font-size:30upx;
	  line-height:30upx;
	  margin-right:1upx;
	  letter-spacing: 3upx;
	  overflow: hidden;
	}
	.lookMoreCommentIco{
	  width:32upx;
	  height:32upx;
	  overflow: hidden;
	  position: relative;
	  font-size: 30upx;
	  color: #139aff;
	}
	.noComment{
	  box-sizing: border-box;
	  padding: 24upx;
	  width: 100%;
	  height: 460rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	}
	.noCommentImg{
		width: 100%;
		height: 100%;
	  // width: 700rpx;
	  // height: 400rpx;
	}
	.noCommentKey{
	  font-size: 30upx;
	  color: #bfbfbf;
	  letter-spacing: 4upx;
	}
	.room-list{
		display: flex;
		border-bottom: 1upx solid #ededed;
		// height: 200upx;
		padding: 30upx;
		font-size: 30upx;
		align-items: center;
		justify-content: space-around;
	
	
	.hotel_type{
		padding: 5upx;
		.cancel{
			font-family: PingFang-SC-Regular;
			font-size: 28upx;
			color: #8f8f8f;
			margin-right: 20upx;
		}
		.confirm{
			font-family: PingFang-SC-Regular;
			font-size: 28upx;
			color: #53c159;
		}
	}
		.re-order{
			padding-top: 12upx;
			width: 16%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 16upx;
			.price{
				padding-bottom: 8upx;
				// color: #FE5A34;
			}
			.reverse-btn{
				border-radius: 8upx 8upx 0 0;
				width: 90upx;
				height: 50upx;
				background: linear-gradient(left,#fa643d,#ff504f);;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				text-align: center;
				color: #fff;
			}
			.reverse-tips{
				border-radius: 0 0 8upx 8upx;
				display: flex;
				width: 90upx;
				height: 50upx;
				color: #FE5A34;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				text-align: center;
				font-size: 20upx;
				border-bottom: 1upx solid #FE5A34;
				border-left: 1upx solid #FE5A34;
				border-right: 1upx solid #FE5A34;
			}
		}
	}
	.hoteldetail {
		// lunbotu 
		.swiper-contain {
			position: relative;
			.back{
				position: fixed;
				top:65upx;
				left: 25upx;
				border-radius: 50%;
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: rgba(255,255,255,0.6);
				text{
					font-size: 45upx;
				}
				
				z-index: 20;
			}
		}

		swiper {
			min-height: 453upx;
		}

		.swiper-img {
			width: 100%;
			height: 100%;
		}
		.pic-tip{
			position:absolute;
			display: flex;
			width: 160upx;
			height: 40upx;
			right: 20upx;
			bottom: 14upx;
			border-radius: 18upx;
			flex-direction: row;
			justify-content: center;
			background: #000;
			opacity:0.7;
			z-index: 22;
			.pic{
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: center;
				// padding: 4upx;
				font-size: 22upx;
				color: #fff;
				// height: 30upx;
				// width: 200upx;
				view{
					display: flex;
					justify-content: center;
					align-items: center;
					// text-align: center;
				}
				.image{
					// margin: 2upx 10upx 0 0;
					// width: 30upx;
					// height: 30upx;
				}
			}
		}
		.dots {
			display: flex;
			position: absolute;
			width: 100%;
			justify-content: center;
			align-items: center;
			bottom: 17upx;
			// z-index: 100;

			.dot {
				width: 17upx;
				height: 17upx;
				border-radius: 50%;
				margin-left: 12upx;
				background: #D2D5DA;
				transition: all .3s;

				&.active {
					background: black;
				}
			}
		}
		//酒店info
		.introduce{
			border-radius: 30rpx 30rpx 0 0;
			padding: 26upx;
			// border-bottom: 1upx solid #eee;
			.intro-name{
				font-size: 45upx;
				font-weight: bold;
				display: flex;
				flex-wrap: nowrap;
				
				// justify-content: space-between;
				view{
					display: flex;
					flex-direction: row;
					// justify-content: flex-end;
					// align-items
					margin-right: 8upx;
					align-items: flex-end;
					// align-items: c;
				}
				
				// .star{
				// 	width: 28%;
				// 	padding: 0
				// 	image{
				// 		width: 20upx;
				// 		height: 20upx;
				// 	}
				// }
			}
			.intro-tips{
				margin-top: 18upx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				width: 50%;
				.tip{
					background: #e2a26d;
					color: #fff;
					padding: 6upx;
					font-size: 24upx;
					border-radius: 7upx;
					margin-right: 10upx;
				}
			}
			.intro-address{
				margin-top: 18upx;
				font-size: 30upx;
			}
			
		}
		// 轮播图下描述
		.swiper-descri {
			padding: 33upx 45upx 48upx;
			line-height: 40upx;
		}
		
		// dizhi 
		.address {
			padding: 40upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.address-del {
				margin-left: 10upx;
				width: 400upx;
			}

			.tip {
				width: 122upx;
				height: 44upx;
				border: 1upx solid rgba(254, 90, 52, 1);
				border-radius: 22upx;
				color: #FE5A34;
				display: flex;
				justify-content: center;
				align-items: center;

				.a-jt {
					width: 22upx;
					height: 22upx;
				}
			}
		}
		.hotel-detail{
			font-size: 27upx;
			padding: 28upx;
			display: flex;
			line-height: 45upx;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			border-bottom: 1upx solid #eee;
			
			.room-facility,.hotel-facility{
				text{
					
				}
			}
			.more{
				position: absolute;
				right: 10upx;
				top:26upx;
				color: #2B91E2;
				font-size: 30upx;
			}
		}
		
		.traveller{
			//评论
			
			.travller-list{
				padding: 20upx;
				display: flex;
				flex-direction: row;
				font-size: 28upx;
				.list-left{
					width: 15%;
					text-align: center;
					display: flex;
					flex-direction: row;
					justify-content: center;
					// align-items: center;
					.icon{
						width: 80upx;
						height: 80upx;
						border-radius: 100upx;
						image{
							border-radius: 100upx;
							width: 100%;
							height: 100%;
						}
					}
				}
				.list-right{
					// padding-left: 20upx;
					
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					border-bottom: 1upx solid #eee;
					padding:20upx 20upx 30upx 20upx;
					.time{
						font-family: PingFang-SC-Medium;
						font-size: 24upx;
					}
					.desc{
						font-family: PingFang-SC-Medium;
						font-weight: normal;
						font-stretch: normal;
						line-height: 22px;
						letter-spacing: 0px;
						color: #333333;
					}
				}
				
				
			}
			
			//住客点评
			.traveller-info{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 40upx;
				.title{}
				.more{
					padding-top: 10upx;
					color: #333333;
					// display: flex;
					// flex-direction: column;
					// justify-content: flex-start;
				}
			}
			
			.no-travel{
				display: flex;
				justify-content: center;
				justify-items: center;
				padding-bottom: 40upx;
				.img{
					width: 500upx;
					height: 300upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		// 入住-离店
		.checkin {
			width: 100%;
			padding: 0 24upx;
			// padding: 20upx 0upx;
			.checkin-date-picker {
				border-bottom: 1upx solid #F5F5F5;
				padding: 20upx;
				// margin: 20upx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.checkin-date-left {
					display: flex;
					flex-direction: row-reverse;
					align-content: center;
					// padding: 16upx;
					padding-left: 10upx;
					.check-txt{
						margin-left: 10upx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}
					.date {
						color: #0092FF;
						// padding-top: 16upx;
					}
				}
			}
			.all-btn{
					padding-top: 20upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			.hotel-list {
				border-bottom: 0.5upx solid #ededed;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 20upx 0;
				font-size: 28upx;
				.hotel-left{
					
					width: 26%;
					height: 170upx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 6upx;
					}
				}
				.hotel-right{
					padding-left: 5upx;
					width: 55%;
					.name{
						padding: 5upx;
						font-size: 30upx;
						font-weight: bold;
						font-family: PingFang-SC-Bold;
						color: #333333;
						letter-spacing: 2px;
					}
					.tips{
						line-height: 36upx;
						padding: 5upx;
						font-size: 26upx;
						color:#888;
					}
					.hotel_type{
						padding: 5upx;
						.cancel{
							font-family: PingFang-SC-Regular;
							font-size: 28upx;
							color: #8f8f8f;
							margin-right: 20upx;
						}
						.confirm{
							font-family: PingFang-SC-Regular;
							font-size: 28upx;
							color: #53c159;
						}
					}
				}
				.re-order{
					padding-top: 12upx;
					width: 16%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 24upx;
					.price{
						padding-bottom: 8upx;
						// color: #FE5A34;
					}
					.reverse-btn{
						border-radius: 8upx 8upx 0 0;
						width: 90upx;
						height: 50upx;
						background: linear-gradient(left,#fa643d,#ff504f);;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						text-align: center;
						color: #fff;
					}
					.reverse-tips{
						border-radius: 0 0 8upx 8upx;
						display: flex;
						width: 90upx;
						height: 50upx;
						color: #FE5A34;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						text-align: center;
						font-size: 20upx;
						border-bottom: 1upx solid #FE5A34;
						border-left: 1upx solid #FE5A34;
						border-right: 1upx solid #FE5A34;
					}
				}
				
				.hotel-li {
					padding: 50upx 24upx 40upx;
					border-bottom: 1upx solid #F5F5F5;
					display: flex;

					.li-img {
						width: 250upx;
						height: 156upx;
						margin-right: 22upx;
					}

					.li-right {
						.hotel-name {
							margin: 6upx 0 40upx;
							font-weight: bold;
						}

						.li-right-bottom {
							display: flex;

							.fenlei {
								width: 276upx;
								line-height: 39upx;
								color: #4A4A4A;
							}

							.reserve-box {
								flex: 1;

								.money {
									color: #FE5A34;
									margin-bottom: 14px;
								}

								.reserve-btn {
									width: 106upx;
									height: 44upx;
									background: rgba(254, 90, 52, 1);
									border-radius: 22upx;
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}
						}

					}
				}

			
				
			}
		}
		
		// 附近酒店
		.nearbyhotel {

			// padding: 0 24upx;
			.nearby-name {
				padding: 32upx 24upx 41upx 46upx;
			}

			.nearbyhotel-list {
				margin-bottom: 54upx;
				display: flex;
				overflow-x: scroll;
				margin: 0 0 0 24upx;

				.nearbyhotel-li {
					width: 284upx;
					margin-right: 19upx;
					flex-shrink: 0;

					.near-img {
						width: 100%;
						height: 197upx;
					}

					.nearbyhotel-li-bottom {
						padding: 19upx 0;

						.near-name {
							margin: 0upx 0 43upx;
							font-weight: bold;
						}

						.near-bottom-box {
							color: #AFAFAF;
							display: flex;
							align-items: center;

							.near-money {
								color: #FE5A34;
								margin-right: 10upx;
							}
						}
					}
				}
			}
		}
	}
</style>
